<template>
    <div class="entry_orders">
      <tab>
        <tab-item selected @on-item-click="change(1)">我的买单</tab-item>
        <tab-item  @on-item-click="change(2)">我的卖单</tab-item>
      </tab>
        <div class="wire"></div>
        <div class="list" v-for="i in data">
        <ul>
            <li>
                <div class="left">
                    <p>{{i.stade === 1 ? '卖家ID' : '买家ID' }}：{{i.userID}}</p>
                    <p class="p2">产品数量：{{i.num}}</p>
                    <p class="p3">挂单时间：{{i.date}}</p>
                </div>
                <div class="right">
                    <p class="p4">{{i.process}}</p>
                    <p class="p3">结束时间：{{i.date}}</p></div>
            </li>
           </ul>
          <ul>
            <li>
              <div class="left">
                <p>{{i.stade === 1 ? '卖家ID' : '买家ID' }}：{{i.userID}}</p>
                <p class="p2">产品数量：{{i.num}}</p>
                <p class="p3">挂单时间：{{i.date}}</p>
              </div>
              <div class="right">
                <p class="p4">{{i.process}}</p>
                <p class="p3">结束时间：{{i.date}}</p></div>
            </li>
          </ul>
        </div>
        </div>

</template>

<script>
  import {Cell, Group, Tab, TabItem} from 'vux'
  export default {
    name: 'Entry_Orders',
    components: {
      Cell,
      Group,
      Tab,
      TabItem
    },
    data () {
      return {
        data: [],
        showBtn: false
        // NUM:true
      }
    },
    computed: {

    },
    created () {
      this.init()
      // console.log(this.NUM)
    },
    methods: {
      init () {
        this.change()
      },
      onItemClick (index) {
        // console.log(this.route)
        // console.log(index)
      },
      change (num) {
        // this.NUM=num;
        let newdata = [
          {userID: 12345, num: 25, process: '进行中', date: '2014-02-20', end: true, color: 'red', stade: 1},
          {userID: 15411, num: 52, process: '已结束', date: '2014-02-20', end: false, stade: 2},
          {userID: 12345, num: 27, process: '未交易', date: '2014-02-20', end: false, stade: 1},
          {userID: 15411, num: 52, process: '进行中', date: '2014-02-20', end: true, stade: 2}
        ]
        // if(num===1){
        //   this.NUM=true
        // }else {
        //   this.NUM=false
        // }
        // console.log(this.NUM);
        this.data = newdata
      }
    }
  }
</script>

<style scoped>
    .entry_orders{
        font-size: 0.3rem;
    }
    .entry_orders h5{
        height: 0.9rem;
        line-height: 0.9rem;
        margin: 0;
        font-weight: normal;
        background-color: #537fbf;
        color: #fff;
        display: flex;
    }
    .entry_orders h5 a{
        font-size: 0.4rem;
        text-decoration: none;
        color: #fff;
        flex-grow: 1;
        margin-left: 0.4rem;
    }
    .entry_orders h5 span{
        flex-grow:2 ;
        padding-left: 1rem;
    }
    .nav-tab{
        display: flex;
        list-style: none;
        height: 1rem!important;
        margin: 0;
        line-height: 1rem;
    }
    .nav-tab li{
        flex-grow: 1;
        text-align: center;
    }
    .nav-tab li a{
        color: #666;
        width: 1.8rem;
    }
    .nav-tab li div{
        width: 1.8rem;
        margin: 0 auto;
    }
    .nav-tab li a:hover{
        color: #537fbf;
        font-weight: bold;
    }
    .nav-tab li div:hover{
        border-bottom: 2px solid #7294c8;
    }
    .wire{
        height: 0.1rem;
        background-color: #fafafa;
    }
   .entry_orders li{
        display: flex;
     margin-bottom: 0.1rem;
    }
    .left{
      flex-grow: 1;
      padding-left: 0.4rem;
      padding-top: 0.1rem;
    }
    .right{
        flex-grow: 1;
        width: 2.5rem;
        text-align: right;
        padding-right: 0.4rem;
    }
    p{
      font-size: 0.28rem;
      line-height: 0.6rem;
    }
    .p2{
        color: #537fbf;
        font-weight: bold;
    }
    .p3{
        font-size: 0.24rem;
        color: #999;
    }
    .p4{
        margin-top: 0.7rem;
        color: #999;
    }
    .p5{
        color: #fbb752;
    }
    .list ul{
        border-bottom: 0.01rem solid #eeeeee;
    }
</style>
